<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-7 col-lg-7 col-md-7 header">注册</div>
      <div class="col-xs-5 col-lg-5 col-md-5 hinder" @click="toLogin">
        已有帐号？点击登录
      </div>
      <div class="col-xs-12 col-lg-12 col-md-12 user">
        <el-input
          class="col-xs-12 col-lg-12 col-md-12"
          placeholder="请输入用户名"
          v-model="UserName"
          clearable
          @blur="review1"
        ></el-input>
      </div>
      <div class="col-xs-12 col-lg-12 col-md-12 email">
        <el-input
          class="col-xs-12 col-lg-12 col-md-12"
          placeholder="请输入邮箱"
          v-model="Email"
          clearable
          @blur="review1"
        ></el-input>
      </div>
      <div class="col-xs-12 col-lg-12 col-md-12 psd">
        <el-input
          class="col-xs-12 col-lg-12 col-md-12"
          placeholder="请输入密码"
          v-model="password"
          show-password
          @blur="review2"
        ></el-input>
      </div>
      <div class="col-xs-12 col-lg-12 col-md-12 again_psd">
        <el-input
          class="col-xs-12 col-lg-12 col-md-12"
          placeholder="请再次输入密码"
          v-model="again_password"
          show-password
          @blur="review3"
        ></el-input>
      </div>
      <div class="col-xs-12 col-lg-12 col-md-12 bottom">
        <el-button type="primary" round @click="regist">注册</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "Register",
  data() {
    return {
      UserName: "",
      password: "",
      again_password: "",
      Email:""
    };
  },
  methods: {
    review1() {
      if (this.UserName == "") {
        this.$message({
          message: '用户名不能为空',
          type: 'warning'
        });
      }
    },
    review2() {
      if (this.password == "") {
        this.$message({
          message: '密码不能为空',
          type: 'warning'
        });
      }
    },
    review3() {
      if (this.again_password == "") {
        this.$message({
          message: '密码不能为空',
          type: 'warning'
        });
      } else if (this.again_password != this.password) {
        this.$message({
          message: '密码不同请重新输入',
          type: 'warning'
        });
      }
    },
    toLogin() {
      this.$router.push({
        name: "login",
      });
    },
    regist() {
        const registInf = {
            email:this.Email,
            name:this.UserName,
            password:this.again_password
        }
        this.$store.dispatch("getRegist",registInf);
        setTimeout(() => {
            if(this.registInf != '') {
              localStorage.setItem("token",this.registInf)
            this.$router.push({
                name:"home",
                params:{token:this.registInf}
            })
        } else {
            this.UserName = ''
            this.Email = ''
            this.password = ''
            this.again_password = ''
            this.$message.error('注册失败，请重新输入');
        }
        }, 500);
    }
  },
  computed:{
    ...mapState({
        registInf: (state) => state.one.registInf
    })
  }
};
</script>

<style scoped>
.hinder {
  font-size: 10px;
  color: red;
  margin-top: 40px;
  cursor: pointer;
}
.hinder:hover {
  text-decoration: underline;
}
.el-input {
  margin-left: 0 !important;
  width: 100% !important;
  margin-top: 20px;
}
.el-button {
  width: 200px;
}
.header {
  font-size: 24px;
  color: black;
  text-align: right;
  margin-top: 20px;
}
.bottom {
  text-align: center;
  margin-top: 20px;
}
</style>